Adding Custom Fonts In WordPress Using @Font-Face CSS Rule
August 19th, 2018 | by Ravi Chahar || 3 Comments |
For every WordPress website, to give a better look, most of the web designers add custom fonts. There are many ways, but this tutorial is about adding custom fonts in WordPress using font face CSS rule.
There are many free and premium fonts which can be found on the website like Typekit. In every WordPress theme, at least one custom font is used.
Some web designers add Google Web fonts in their WordPress themes. It’s because all the fonts are free in Google fonts’ library.
But if you’re thinking about choosing any a custom font from Typekit, Font Squirrel or any other website then you have to take a different approach.
Knowing About The Font Format File Types
First of all, you should know the different font formats. There are many font formats, but in most projects, you will find only three.
- TrueType Font (TTF)
- OpenType Font (OTF)
- Web Open Font Format (Web Format)
Depending on the browser version and type, these font formats are used.
But to get it to work everywhere, web designers use the Web Open Font Format. Though it’s kind of hard to find the font files in this format.
But don’t worry about it, you can easily find the font files in .ttf and .otf formats.
After downloading the file of your favorite custom font, you have to convert it into web format using the Font Squirrel Font Generator.
Upload your font .ttf or .otf type file and convert it using the recommended settings of the web font generator.
Download the ZIP file to your computer and extract the content.
Uploading The Font Files to Your Web Hosting Server
To make it work, you have to upload the font files to your theme folder.
Though most of the WordPress themes already have a “Fonts” folder if not then you can create a new one.
Login to the cPanel of your web hosting account and navigate to file manager>>wp-content>>themes>>theme name and create the “Fonts” folder.
Upload the extracted font files to this folder using the “Upload” button shown in the navigation menu.
You can also use your FTP account to do so.
You have successfully uploaded the font files in your WordPress theme, but the work is not done yet.
Adding @Font-Face Rule In the CSS File
You have to edit the style.css file of your WordPress theme to add a few lines of code. Adding custom fonts in WordPress using font face CSS rule requires a little bit of designing knowledge.
Either you edit the style.css file from the cPanel or the WordPress admin panel. The choice is yours.
If you already have opened the theme folder then find the style.css file and right click on the file to select an edit option.
Now the code is required to fetch the font.
font-family : Fontname;
src : url([get_bloginfo]url[/get_bloginfo]/files/public_html/wp-content/themes/themename/fonts/fontname-regular.ttf);
font-weight: normal;
}
Don’t forget to replace the font name and the theme name. You can easily notice the font name while choosing it.
Suppose the font name is “Open Sans” then you will use “Open Sans-Regular.ttf” instead of “Fontname-Regular.ttf”
NOTE: The path of the source is given considering your website is located in the PUBLIC_HTML folder. If you have a sub-domain or your website in any other folder, then you have to change the path.
How To Use This Font For A Perfect Design
Just like any other font, you can add the font-family for any element.
Let me show you an example. Suppose you want to target the heading of the post with an ID or class.
Similarly, you can use this font-family anywhere in your WordPress theme.
An Alternative You Should Know
For some platforms, you have to use a different font file path. In the previous method, PUBLIC_HTML is included. In some cases, it doesn’t work.
To fix this, you can directly include the URL of your website.
font-family : Fontname;
src : url(https://www.yoursite.com/wp-content/themes/themename/Fonts/Fontname-Regular.ttf);
font-weight: normal;
}
As shown above, this code consists of only one new thing. You have to replace the PUBLIC_HTML with the URL of your website.
To use it for any HTML element, you have to follow the same CSS method as shown above. The same use of font-family and you’re done.
The process of adding custom fonts in WordPress using font face CSS rule is over.
You can upload as many fonts as you want like this. Though it’s not recommended to use more fonts because it impacts the page loading time of your website.
You can also add icon fonts in your WordPress theme if you want. I hope you can easily configure this. If you face any problem, feel free to drop a comment.
You can also connect with us on Twitter, LinkedIn, and Facebook.
Related Posts
3 comments
Leave a Reply
Hi Ravi,
I love step-by-step tutorial on anything WordPress related. I think it helps people learn a lot better. I know it helps me.
I am such a visual learner and when I can see something on a picture it makes it easier for me to understand. Thanks for sharing how to add custom fonts to WordPress.
Your tutorial will definitely help anyone out who is trying to get started with WordPress. I appreciate you taking the time to share this information with us.
Hope you have a great day!
Susan
Hey Susan,
Most of the beginners face the problem with WordPress and they need a step by step to accomplish their tasks. Adding screenshots make it easy to understand.
People can easily get the visuals. I am glad that I could help you learn more about WordPress.
Thanks for taking the time to spread your words.
~Ravi
Hi Ravi,
It is very helpful for the people who want to add custom fonts to their wordpress website.
The pictorial tutorials are easy to understand than context form.
Thanks for sharing this awesome tutorials! ?